<template>
  <div class="business-detail-container">
    <!-- 顶部卡片信息 -->
    <el-card class="business-card">
      <div class="business-title">客户资料/{{ businessInfo.name }}</div>
      <el-form :model="businessInfo" label-width="100px" class="info-form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="客户姓名">
              <el-input v-model="businessInfo.name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码">
              <el-input v-model="businessInfo.phone" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别">
              <el-input v-model="genderText" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="年龄">
              <el-input v-model="businessInfo.age" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="微信号">
              <el-input v-model="businessInfo.weixin" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="QQ号码">
              <el-input v-model="businessInfo.qq" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="渠道来源">
              <el-input v-model="businessInfo.channelName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="活动信息">
              <el-input v-model="businessInfo.activityInfo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间">
              <el-input v-model="businessInfo.createTime" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="归属时间">
              <el-input v-model="businessInfo.ownTime" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分配者">
              <el-input v-model="businessInfo.assigner" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="归属人">
              <el-input v-model="businessInfo.owner" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 跟进表单 -->
    <el-card class="business-follow-card">
      <div class="business-follow-title">商机跟进</div>
      <el-form :model="followForm" label-width="100px" class="follow-form">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="客户姓名">
              <el-input v-model="followForm.name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别">
              <el-select v-model="followForm.gender" disabled>
                <el-option label="男" :value="0" />
                <el-option label="女" :value="1" />
                <el-option label="未知" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年龄">
              <el-input-number v-model="followForm.age" :min="0" :max="120" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="客户微信号">
              <el-input v-model="followForm.weixin" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户QQ号码">
              <el-input v-model="followForm.qq" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户手机号">
              <el-input v-model="followForm.phone" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="商机状态">
              <el-radio-group v-model="followForm.status" disabled>
                <el-radio label="1">初步沟通</el-radio>
                <el-radio label="2">需求确认</el-radio>
                <el-radio label="3">方案报价</el-radio>
                <el-radio label="4">商务谈判</el-radio>
                <el-radio label="5">合同签订</el-radio>
                <el-radio label="6">成交</el-radio>
                <el-radio label="7">失败</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="商机金额">
              <el-input-number v-model="followForm.amount" :min="0" :precision="2" :step="1000" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="跟进记录">
              <el-input type="textarea" v-model="followForm.record" placeholder="请输入内容" rows="4" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="下次跟进时间">
              <el-date-picker v-model="followForm.nextTime" type="datetime" placeholder="请选择时间" style="width: 100%;" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right;">
            <el-button type="primary" disabled>保存</el-button>
            <el-button type="success" disabled>成为转交客户</el-button>
            <el-button @click="goBack">返回</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()
const businessId = route.params.id || route.params[1]
const businessInfo = ref({})
const followForm = ref({
  name: '',
  gender: 2,
  age: '',
  weixin: '',
  qq: '',
  phone: '',
  status: '1',
  amount: 0,
  record: '',
  nextTime: ''
})

const genderText = computed(() => {
  const gender = businessInfo.value.gender
  return gender === 0 ? '男' : gender === 1 ? '女' : '未知'
})

function goBack() {
  router.back()
}

onMounted(() => {
  // 获取商机详情
  request({ url: `/tienchin/business/${businessId}`, method: 'get' }).then(res => {
    businessInfo.value = res.data || {}
  })
  // 获取跟进记录
  request({ url: `/tienchin/business/${businessId}`, method: 'get' }).then(res => {
    const data = res.data || {}
    Object.assign(followForm.value, data || {})
  })
})
</script>

<style lang="scss" scoped>
.business-detail-container {
  padding: 20px;
  background: #f0f2f5;
  min-height: calc(100vh - 84px);
}

.business-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  :deep(.el-card__body) {
    padding: 20px;
  }
}

.business-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.info-form {
  :deep(.el-form-item) {
    margin-bottom: 18px;
  }

  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #606266;
  }

  :deep(.el-input.is-disabled .el-input__inner) {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #606266;
  }
}

.business-follow-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  :deep(.el-card__body) {
    padding: 20px;
  }
}

.business-follow-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.follow-form {
  background: #fff;
  padding: 20px;
  border-radius: 8px;

  :deep(.el-form-item) {
    margin-bottom: 22px;
  }

  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #606266;
  }

  :deep(.el-input.is-disabled .el-input__inner),
  :deep(.el-textarea.is-disabled .el-textarea__inner) {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #606266;
  }

  :deep(.el-radio-group) {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }

  :deep(.el-radio) {
    margin-right: 0;
    padding: 8px 15px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      border-color: #409eff;
    }

    &.is-checked {
      background-color: #ecf5ff;
      border-color: #409eff;
    }
  }
}

:deep(.el-button) {
  padding: 8px 20px;
  font-weight: 500;
  
  &.el-button--primary {
    background-color: #409eff;
    border-color: #409eff;
    
    &:hover {
      background-color: #66b1ff;
      border-color: #66b1ff;
    }
  }
}

:deep(.el-tag) {
  padding: 0 10px;
  height: 28px;
  line-height: 26px;
  font-size: 13px;
  border-radius: 4px;
  
  &.el-tag--success {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
  }
  
  &.el-tag--danger {
    background-color: #fef0f0;
    border-color: #fde2e2;
    color: #f56c6c;
  }
}

:deep(.el-input-number) {
  width: 100%;
  
  .el-input__inner {
    text-align: left;
  }
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}
</style> 